<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    :cancelText="$t('关闭')"
    v-drag
  >
    <template slot="footer">
      <a-button @click="handleCancel">{{ $t('取消') }}</a-button>
      <a-button @click="handleOk" type="primary">{{ $t('保存') }}</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <div>
        <a-form-model :rules="rules" :model="model" ref="form">
          <a-row>
            <a-col :span="24">
              <a-form-model-item :label="$t('排序序号')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sort">
                <a-input v-model="model.sort"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item :label="$t('名称')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="functionName">
                <a-input v-model="model.functionName"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item :label="$t('状态')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="state">
                <a-select v-model="model.state">
                  <a-select-option v-for="(item, index) in stateList" :value="item.value" :key="index">{{
                    item.title
                  }}</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item
                prop="iconUrl"
                :label="$t('图片')"
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
              >
                <div>
                  <j-upload v-model="model.iconUrl" accept="jpg,jpeg,png,gif,webp" fileType="image" :count="1"></j-upload>
                  <div style="color: #f7b926; line-height: 1.2">{{ $t('建议尺寸') }}：98*98</div>
                </div>
              </a-form-model-item>
            </a-col>           
          </a-row>
        </a-form-model>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { httpAction } from '@/api/manage'

export default {
  name: 'EditBusinessModal',
  components: { },
  data() {
    return {
      title: '',
      width: 600,
      visible: false,
      model: { },
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 },
      },
      rules: {
        sort: [{ required: true, message: this.$t('请输入') }],
        functionName: [{ required: true, message: this.$t('请输入') }],
        state: [{ required: true, message: this.$t('请选择状态') }],
      },
      stateList: [{
        value:1,
        title:this.$t('启用')
      },{
        value:2,
        title:this.$t('停用')
      }],
    }
  },
  methods: {
    edit(record) {
      let that = this
      that.model=Object.assign({},record)
      that.visible=true
      that.$nextTick(() => {
        that.$refs.form.clearValidate()
      })
    },
    handleOk() {
      let that = this
      that.$refs.form.validate((valid) => {
        if (valid) {
          let query = {}
          query = that.model
          that.confirmLoading = true
          let url = ''
          let method = ''
          if (that.model.id) {
            url = '/applet/bisAppletFunctionSet/edit'
            method = 'put'
          } else {
            url = '/applet/bisAppletFunctionSet/add'
            method = 'post'
          }
          httpAction(url, query, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.close()
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.visible = false
    },
  },
}
</script>